<template>
	<view class="container">
		<scroll-view class="detail-scroll" :style="{'height': scrollheight+'px'}" ref="detailScroll" scroll-y="true">
			<view>
				<uni-section title="食物图片" sub-title="" type="square">
					<image :src="'http://localhost:8090/foodapp'+data.icon" mode="widthFix"></image>
				</uni-section>
				<uni-section title="食物名称" sub-title="" type="square">
					{{data.name}}
				</uni-section>
				<uni-section title="食物类别" sub-title="" type="square">
					{{data.type}}
				</uni-section>
				<uni-section title="食物价格" sub-title="" type="square">
					￥{{data.price}}元
				</uni-section>
				<uni-section title="食物介绍" sub-title="" type="square">
					{{data.description}}
				</uni-section>
				<uni-section title="最新评论" sub-title="" type="square">
					<uni-list>
						<uni-list-item :title="item.comment" :rightText="item.postDate"
							v-for="item,index in comments"></uni-list-item>
					</uni-list>
				</uni-section>
				<navigator :url="'../comment/commentlist?foodid='+data.id" open-type="navigate"><button
						type="default">查看所有评论</button></navigator>
			</view>
		</scroll-view>
		<view class="postcomment">
			<input disabled class="placeholder" placeholder="请输入评论内容"></input>
			<button class="postbutton" size="mini" @click="showPostDialog">发表</button>
		</view>
		
		<uni-popup type="dialog" ref="popup">
			<uni-popup-dialog title="美食评论发表" @confirm="postMessage">
				<view style="width: 100%;">
					<view>味道</view>
					<uni-rate value="0"></uni-rate>
					<view>价格</view>
					<uni-rate value="0"></uni-rate>
					<uni-easyinput v-model="message" placeholder="请输入评论内容" type="textarea" />
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				comments: [],
				message: '',
				scrollheight: 100,
				data: {
					"id": 1,
					"name": "烤鸭",
					"type": "肉类",
					"icon": "/images/1.png",
					"description": "烤鸭是北京和南京的一道特色名菜,属于北京菜或金陵菜,该菜品以色泽红艳,肉质细嫩,味道醇厚,肥而不腻的特色,被誉为“天下美味”而驰名中外,其色泽略黄,柔软淡香,夹卷其他荤素食物食用,为宴席常用菜点,更是家常风味美食。",
					"price": 88.5
				}
			}
		},
		methods: {
			
			postMessage() {
				let data = {
					"comment": this.message,
					"foodId": this.data.id,
					"postDate": new Date().toISOString().substring(0,5),
					"userId": uni.getStorageSync('userInfo').id
				}
				uni.request({
					url: 'http://localhost:8090/foodapp/comments/add',
					method: 'POST',
					data: data,
					success: res => {
						
						console.log(res);
						if(res.data.success){
							uni.showToast({
								title: '成功'
							});
							this.getCommentListTop5()
						}else{
							uni.showToast({
								title: '失败',
								icon:'error'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '失败',
							icon:'error'
						});
					},
					complete: () => {}
				});
			},

			getCommentListTop5() {
				uni.request({
					url: 'http://localhost:8090/foodapp/comments/getCommentsByFoodId',
					method: "POST",
					data: {
						foodId: this.data.id
					},
					success: res => {
						this.comments = res.data.data.slice(0, 5)
						console.log(this.comments);
					},
					fail: () => {},
					complete: () => {}
				});
			},

			showPostDialog() {
				//TODO 打开对话框
				this.$refs.popup.open()
			},
			setSetailScroll() {
				const query = uni.createSelectorQuery().in(this)
				query.select('.container').boundingClientRect(data => {
					console.log(data);
					if (data) {
						console.log(data);
						this.scrollheight = data.height - 48
					}
				}).exec()
			},

		},
		onReady() {
			this.setSetailScroll()
			console.log(uni.getStorageSync('userinfo'))
		},
		onLoad(e) {


			let id = e.id
			uni.request({
				url: 'http://localhost:8090/foodapp/food/findone',
				method: 'POST',
				data: {
					id: id
				},
				success: res => {
					this.data = res.data.data
				},
				fail: () => {},
				complete: () => {}
			});

			this.getCommentListTop5()

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {
		padding: 10rpx;
		font-size: 14px;
		line-height: 24px;
		height: 100%;

		.detail-scroll::-webkit-scrollbar {
			display: none;
		}

		.detail-scroll {
			scrollbar-width: none;
		}
	}

	.postcomment {
		position: fixed;
		bottom: 0;
		height: 96rpx;
		width: 100%;
		display: flex;
		flex-direction: row;

		align-items: center;

		.placeholder {
			flex-grow: 1;
			border: 1rpx solid #333;
			border-radius: 5px;
			padding: 10rpx;

		}

		.postbutton {
			margin: 0 20rpx;


		}
	}
</style>